<template>
  <div class="homeContainer">
    <el-container class="el-container">
      <el-aside width="260px" class="el-aside">
        <div class="logo">
          <img src="../../assets/image/logo_aside.svg" alt="">
          <span class="log_img">Cloud Vendor</span>
        </div>
        <div class="aside_select">

          <el-menu class="el-menu"
                   router
                   default-active="2"
                   background-color="white"
                   text-color="black"
                   active-text-color="#ffd04b">
            <el-menu-item index="/home">
              <i class="el-icon-setting"></i>
              <span slot="title">后台首页</span>
            </el-menu-item>
            <el-submenu index="/home">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>后台管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/order">
                  <span slot="title">订单列表</span>
                </el-menu-item>
                <el-menu-item index="/test">
                  <span slot="title">商品添加</span>
                </el-menu-item>
                <el-menu-item index="/goodsList">
                  <span slot="title">商品列表</span>
                </el-menu-item>
                <el-menu-item index="/orderComments">
                  <span slot="title">订单评论</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-main class="el_main">
        <Header></Header>
        <router-view class="router-view"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/tools/Header";

export default {
  name: "MainHome",
  components: {Header},
  data() {
    return {
      opens: [],
      tags: [
        {name: '标签一', type: 'info'},
        {name: '标签二', type: 'info'},
        {name: '标签三', type: 'info'},
        {name: '标签四', type: 'info'},
        {name: '标签五', type: 'info'}
      ],
    }
  },
  methods: {
    myConsole() {
      console.log(this.opens)
      this.tags.push({name: '标签五', type: 'danger'})
    },
    go_test2() {
      this.$router.push("test")
    },
    test() {
      this.$router.push("/")
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  }
}
</script>
<style scoped>

.homeContainer {
  /*margin-top: 30px;*/
  height: 100%;
  width: 100%;
  /*background-color: #f0f2f5;*/
}


.nav_log {
  font-size: 18px;
}

.el-container {
  height: 100%;
  box-sizing: border-box;
}

.el-menu {
  /*background-color: #001529;*/
}

.logo {
  box-sizing: border-box;
  /*background-color: #001529;*/
  display: flex;
  width: 245px;
  height: 48px;
  padding-top: 3px;
  position: relative;
  padding-left: 12px;
}

.logo img {
  flex: 2;
  width: 30px;
  height: 30px;
  padding-top: 8px;
  padding-right: -50px;
  justify-content: flex-end
}

.log_img {
  padding-left: -10px;
  flex: 9;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  letter-spacing: 1px;
  color: white;
  font-variant: tabular-nums;
  line-height: 48px;
  font-feature-settings: "tnum";
  justify-content: flex-start;
}

.el-aside {
  height: 100%;
  width: 260px;
  /*background-color: #001529;*/
}

.aside_select {
  background-color: white;
}

.el_main {
  /*background-color: #f0f2f5;*/
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav_log {
  padding-left: 30px;
  box-sizing: border-box;
  height: 50px;
  display: flex;
  background-color: white;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.bread_left {
  flex: 10;
  margin-top: 18px;
}

.manager_logo {
  width: 100%;
  flex: 1;
  margin-top: 5px;
  padding-left: 50px;
  display: flex;
}

.manager_logo el-badge {
  margin: 10px;
}

.tag {
  /*margin-top:-44px;*/
  background-color: white;
  display: flex;
  letter-spacing: 1px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  height: 40px;
  padding-left: 13px;
}

.tag .tag-sub {
  margin-top: 5px;
  /*color: black;*/
  font-size: 14px;
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

}

.router-view {
  padding-left: 15px;
  padding-top: 15px;
}

</style>
